import React, { createContext, useState } from 'react';
import Bricks from './bricks';
import SplicePanel from './splice-panel';
import SettingPanel from './setting-panel';
import CreatorContext from './creator-context';
import './index.less';

export default (props: any) => {
  const [compConfigs, setCompConfigs] = useState({bricksConfigs: [], dragComp: null, childrenNode: []});
  return <div className="creator-container">
    <CreatorContext.Provider value={{compConfigs, setCompConfigs}}>
    <div className="left-view"><Bricks /></div>
    <div className="center-view"><SplicePanel /></div>
    <div className="right-view"><SettingPanel /></div>
    </CreatorContext.Provider>
  </div>
}